/**
* Created by ren on 2017/1/11.
*/
<template>
  <div class='share page-wrap'>
    <Nav></Nav>
    <div class="container">
      <div class="sharemain page">
        <div style="font-size: 24px">红包分享到：</div>
        <div class="list" style="overflow: hidden">
          <div @click="cut('wechat')">
            <div class="img">
              <img src="../assets/wechat.png" alt="">
            </div>
            <img :src="select==='wechat'?require('../assets/select1.png'):require('../assets/select2.png')" alt="">
            <div>微信</div>
          </div>
          <div @click="cut('pengyouquan')">
            <div class="img">
              <img src="../assets/pengyouquan.png" alt="">
            </div>
            <img :src="select==='pengyouquan'?require('../assets/select1.png'):require('../assets/select2.png')" alt="">
            <div>朋友圈</div>
          </div>
          <div @click="cut('xinlang')">
            <div class="img">
              <img src="../assets/xinlang.png" alt="">
            </div>
            <img :src="select==='xinlang'?require('../assets/select1.png'):require('../assets/select2.png')" alt="">
            <div>新浪微博</div>
          </div>
          <div @click="cut('qqkongjian')">
            <div class="img">
              <img src="../assets/qqkongjian.png" alt="">
            </div>
            <img :src="select==='qqkongjian'?require('../assets/select1.png'):require('../assets/select2.png')" alt="">
            <div>qq空间</div>
          </div>
        </div>
        <div class="btns" style="text-align: center;margin-top: 144px" v-if="!showServerAgreement">
          <button class="btn" @click="share"
                  style="width: 220px;height:54px;font-size: 24px;color: white;background: #ff9900;border-radius: 5px">
            确认分享
          </button>
        </div>
        <qrcode :cls="qrCls" :value="qrText" :size="size" v-if="showServerAgreement"
                style="text-align: center;margin-top: 100px;"></qrcode>
      </div>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
</template>
<script>
  import Nav from './Nav'
  import Qrcode from 'v-qrcode/src/index'
  import API from '../api'
  import Notify from './Notify'
  export default {
    name: 'share',
    components: {
      Nav,
      Qrcode,
      Notify
    },
    data () {
      return {
        notifyStatus: 2,
        qrCls: 'qrcode',
        qrText: 'hello world',
        size: 200,
        select: 'wechat',
        showServerAgreement: false
      }
    },
    methods: {
      cut: function (select) {
        if (this.select !== select) {
          this.showServerAgreement = false
        }
        this.select = select
      },
      share: function () {
        this.$http.post(API.saveRedvelope, {
          orderNo: this.$route.params.orderNo
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            var redvelopeNo = result.object.redvelopeNo
            switch (this.select) {
              case 'xinlang':
                window.open('http://service.weibo.com/share/share.php?appkey=&title=Au+财富黄金平台隆重启幕，豪送黄金红包&url=http%3A//114.215.84.189%3A8889/wechatxianshang/html/more_redpack_get.html%3FredvelopeNo%3D' + redvelopeNo + '&searchPic=false&style=simple')
                break
              case 'qqkongjian':
                window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http%3A//114.215.84.189%3A8889/wechatxianshang/html/more_redpack_get.html%3FredvelopeNo%3D' + redvelopeNo + '&title=Au+财富黄金平台隆重启幕，豪送黄金红包&desc=国内首个一站式黄金购物平台&summary=&site=')
                break
              case 'wechat':
                this.showServerAgreement = true
                this.qrText = 'http://114.215.84.189:8889/wechatxianshang/html/more_redpack_get.html?redvelopeNo=' + redvelopeNo + ''
                break
              case 'pengyouquan':
                this.showServerAgreement = true
                this.qrText = 'http://114.215.84.189:8889/wechatxianshang/html/more_redpack_get.html?redvelopeNo=' + redvelopeNo + ''
                break
            }
          }
        }, (err) => {
          console.log(err)
        })
      }
    }
  }
</script>